<template>
	<view class="navbar" :class="{
      back: !autoBack
    }">
		<u-navbar :placeholder="placeholder" :bgColor="computedBgColor || bgColor" @leftClick="leftClickHandler"
			:titleStyle="titleStyle" :fixed="fixed">
			<view slot="left">
				<template v-if="autoBack">
          <u-icon name="arrow-left" size="36rpx" :color="backTheme === 'dark' ? '#333333' : '#ffffff'"></u-icon>
					<!-- <image v-if="backTheme === 'dark'" class="left" src="@/static/images/tabbar/back-dark.png"></image>
					<image v-if="backTheme === 'light'" class="left" src="@/static/images/tabbar/back-light.png"></image> -->
				</template>
			</view>
			<view slot="center" class="content navbar-center normal">
				<slot>
					<span v-if="(title + '') != 'true'">{{ title || '' }}</span>
				</slot>
			</view>
		</u-navbar>

		<!-- 		<view class="" :style="{
      height: emptyHeight + 'px',
    }">

		</view> -->
	</view>
</template>

<script>
	// 使用案例：带tabbar渐变头部 <yq-top :fixed="true" :title="''" :autoBack="false" :bgChangeByScroll="true"></yq-top>
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			// 占位防止塌陷
			placeholder: {
				type: Boolean,
				default: false,
			},
			customReturn: {
				type: Boolean,
				default: false,
			},
			fixed: {
				type: Boolean,
				default: true,
			},
			// 返回按钮的主题，支持白色和黑色
			backTheme: {
				type: String,
				default: 'dark' // dark light
			},

			// 是否开启背景色过渡 有些背景需要滚动遮挡内容防止过于生硬
			bgChangeByScroll: {
				type: Boolean,
				default: false,
			},

			bgColor: {
				type: String,
				default: "#ffffff",
			},

			// 有返回启动返回样式
			autoBack: {
				type: Boolean,
				default: false,
			},

			// // // 是否只做占位,有些需求是顶部都没返回，内容从顶部以下开始算起，需要抹平设备的头部信息
			// isEmpty: {
			//   type: Boolean,
			//   default: false,
			// },
		},

		computed: {
			titleStyle() {
				return this.autoBack ? {} : {
					"justify-content": "flex-start",
					"padding-left": "16rpx",
				};
			},
		},

		data() {
			const systemInfo = uni.getSystemInfoSync();
			const statusBarHeight = systemInfo.statusBarHeight;
			return {
				emptyHeight: statusBarHeight + 44,
				computedBgColor: "",
			};
		},

		mounted() {
			// 外部使用组件获取到组件的头部高度
			this.$emit("getHeight", this.emptyHeight);
			this.$emit("get-height", this.emptyHeight);
			this.bgChangeByScroll && uni.$on("onPageScroll", this.pageScrollHandler);
			this.computedBgColor = this.bgChangeByScroll ? this.bgScrollHandler(0) : this.bgColor;
		},

		destroyed() {
			this.bgChangeByScroll && uni.$off("onPageScroll", this.pageScrollHandler);
		},

		methods: {
			leftClickHandler() {
				if (this.customReturn) {
					this.$emit("leftClickHandler");
				} else {
					if (uni.$u.pages().length > 1) uni.navigateBack()
					else {
						uni.switchTab({
							 url: '/pages/index/index'
						});
				}
				}
			},

			pageScrollHandler(data) {
				const {
					scrollTop
				} = data;
				this.computedBgColor = this.bgScrollHandler(scrollTop);
			},

			bgScrollHandler(scrollTop) {
				try {
					return uni.$u.colorToRgba(this.bgColor, scrollTop > 200 ? 1 : scrollTop / 200);
				} catch (error) {
					return "#ffffff";
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.back {
		.navbar-center {
			padding-left: 40rpx;
			flex: 1;
		}
	}

	.left {
		width: 48rpx;
		height: 48rpx;
	}

	.strong {
		font-size: 40rpx;
		font-weight: bold;
	}

	.normal {
		font-size: 32rpx;
		color: #000000;
		font-weight: 400;
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}
</style>